<template>
  <div>
    <Card style="min-height: 80vh;">
      <Table border :columns="columns" :data="tableData" style="margin-top: 16px">
        <template slot-scope="{ row }" slot="operationTime">
          <strong>{{ row.operationTime | getDateTime }}</strong>
        </template>
        <template slot-scope="{ row }" slot="action">
          <span>{{ row.action }}</span>
        </template>
        <template slot-scope="{ row }" slot="content">
          <span>{{ row.content }}</span>
        </template>
        <template slot-scope="{ row }" slot="operationPerson">
          <span>{{ row.operationPerson }}</span>
        </template>
      </Table>
      <div style="text-align: right; margin-top: 16px;">
        <Page
          :total="total"
          show-sizer
          show-elevator
          show-total
          :page-size-opts="pageSizeOpts"
          :page-size="form.pageSize"
          :current="form.pageNo"
          @on-change="pageOnChange"
          @on-page-size-change="pageSizeOnChange" />
      </div>
    </Card>
  </div>
</template>

<script>
import { tLogInfoPageQuery } from '@/api/log'
export default {
  name: 'log_page',
  data () {
    return {
      pageSizeOpts: [10, 30, 50, 100],
      total: 0,
      form: {
        pageSize: 10,
        pageNo: 1
      },
      columns: [
        {
          title: '日期',
          slot: 'operationTime',
          tooltip: true,
          align: 'center',
          minWidth: 150
        },
        {
          title: '操作',
          slot: 'action',
          tooltip: true,
          align: 'center',
          minWidth: 150
        },
        {
          title: '日志内容',
          slot: 'content',
          tooltip: true,
          align: 'center',
          minWidth: 300
        },
        {
          title: '操作人',
          slot: 'operationPerson',
          tooltip: true,
          align: 'center',
          minWidth: 150
        }
      ],
      tableData: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取列表
    async getList () {
      let { data } = await tLogInfoPageQuery(this.form)
      if (data.code == '200') {
        this.tableData = data.result.rows
        this.total = data.result.totalCount
      }
    },
    // 切换分页
    pageOnChange (val) {
      this.form.pageNo = val
      this.getList()
    },
    // 切换条数
    pageSizeOnChange (val) {
      this.form.pageSize = val
      this.getList()
    }
  }
}
</script>

<style lang="less">

</style>
